<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../作业/font_wcvt9qp1sng/iconfont.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .bigbox {
            width: 100%;
            height: 100%;
            background-color: aliceblue;
        }

        .bigbox header {
            background-color: #0099cb;
            height: 35px;
        }

        .bigbox header h3 {
            color: white;
            margin-left: 40px;
            width: 300px;
            line-height: 35px;
        }

        .bigbox header .present {
            float: right;
            margin-top: -24px;
            color: white;
            font-size: 12px;
        }

        .left {
            width: 200px;
            height: 1000px;
            background-color: #2d3e50;
        }

        .left ul li {
            display: block;
            color: white;
            font-size: 16px;
            height: 40px;
            margin-left: 10px;
            padding: 10px;
        }

        .box2 {
            display: flex;
        }

        main .home {
            width: 80px;
            height: 30px;
            color: white;
            background-color: #2d3e50;
            text-align: center;
            line-height: 30px;
            margin-left: 20px;
        }

        main {
            width: 100%;
            /* display: flex;
            flex-direction: row;
            justify-content: space-around; */

        }

        main ul {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }

        main ul li {
            list-style: none;
            display: block;
            width: 23%;
            height: 70px;
            background-color: #0099cb;
            color: white;
            font-size: 20px;
            line-height: 30px;
        }

        main ul .one {
            background-color: #14c376;
        }

        main ul .two {
            background-color: #8f9080;
        }
        .zhuzhuangtu{
            height: 500px;
            display: flex;
            justify-content: space-around;
        }
        .lefttongji {
            width: 48%;
            float: left;
            background-color: aquamarine;
            /* margin-left: 16px; */
            margin-top: 20px;
        }
        .righttongji{
            width: 48%;
            float: right;
            background-color: hotpink;
            /* margin-left: 10px; */
            margin-top: 20px;
        }
        .biaoge{
            width: 98%;
            flex: 1;
            background-color: rgb(172, 200, 252);
            margin-left: 18px;
        }
        table {
            width: 99%;
            height: 94%;
            margin-left: 10px;
            text-align: center;
            margin-top: 30px;
        }
        td {
            border-bottom: 1px solid white;
            border-collapse: collapse;
            height: 60px;
           
        }
    </style>
</head>

<body>
    <div class="bigbox">
        <header>
            <h3>后台管理系统</h3>
            <div class="present">当前用户:bootstrap中文 角色：管理员</div>
        </header>

        <div class="box2">
            <div class="left">
                <ul>
                    <li> <span class="iconfont icon-31shouye"></span> 后台首页</li>
                    <li> <span class="iconfont icon-diannao_o"></span> 设计元素</li>
                    <li><span class="iconfont icon-caozuo"></span> 表单元素</li>
                    <li> <span class="iconfont icon-diannao_o"></span> 示例页面</li>
                    <li> <span class="iconfont icon-liebiao2"></span> 常用列表</li>
                    <li> <span class="iconfont icon-chajian"></span> 脚本插件</li>
                    <li> <span class="iconfont icon-tongjitubiao"></span> 统计图表</li>
                </ul>
            </div>
            <main>
                <div class="home">欢迎首页</div>
                <ul>
                    <li>今日收入<br>100,000,00</li>
                    <li>昨日收入<br>200,000.00</li>
                    <li class="one">月度累计手机<br>1000,000.00</li>
                    <li class="two">年度累计收入<br>5000,000.00</li>
                </ul>
                <div class="zhuzhuangtu">
                    <div class="lefttongji"></div>
                    <div class="righttongji"></div>
                </div>
                <div class="biaoge">
                    <table>
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>订单号</th>
                                <th>商品名称</th>
                                <th>time</th>
                                <th>状态</th>
                                <th>处理情况</th>
                            </tr>
                        </thead>
                        <tbody>
                             <!-- <tr>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                            </tr> -->
                           
                        </tbody>
                    </table>
                   </div>
               
            </main>
        </div>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="../js/promise-ajax.js"></script>
<script>
    var oLeft = document.querySelector('.zhuzhuangtu .lefttongji');
    var e = echarts.init(oLeft);
    e.setOption({
        title: {
            text: '每月收入'
        },
        legend: {//图例
            // bottom: 20,
            top: 10,
            right: 200,
        },
        xAxis: {
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'line',
                }
            },
            data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],

        },
        yAxis: [
            {
                // name: 'Sales Over Time',//名字
                min: 1500,
                max: 5000,
                //纵轴分组
                splitNumber: 7,
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'line',
                    }
                }
            }
        ],
        series: [

            {
                name: '当前每月收入',
                type: 'bar',
                data: [2600, 1600, 1700, 3300, 4700, 3500, 1700, 2500, 2300, 1800, 3900, 1900],
                color: 'blue',
                barWidth: 18,
                itemStyle: {
                    normal: {
                        color: 'hotpink',
                        // barWidth: 20,
                    }
                },

            },
            {
                name: '同期每月收入',
                type: 'bar',
                data: [2100, 1700, 1900, 3000, 4000, 3700, 1700, 2000, 2700, 2200, 3700, 3600],
                smooth: true,
                barWidth: 18,
                itemStyle: {
                    normal: {
                        color: 'lightblue',
                    }
                }

            }
        ]
    });

    var oRight = document.querySelector('.zhuzhuangtu .righttongji');
    var x = echarts.init(oRight);
    x.setOption({
        title: {
            text: '每年收入走势',
            left: 10,
            top: 5
        },
        legend: { //图例
            top: 10,
            right: 200,
        },
        tooltip: {
            trigger: 'axis'
        },
        
        xAxis: {
            
            data: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020],
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'line',
                }
            }
        },
        yAxis: {
            max: 80,
            min: 20,
            splitNumber: 6,
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'line',
                }
            }
            
        },
        series: [
            {
                name: '每年收入走势',
                smooth: true,//平滑曲线
                type: 'line',
                symbol: 'circle',
                color: 'aquamarine',
                data: [50, 55, 60, 40, 45, 40, 65, 40, 69, 20, 72, 60],
            },
            {
                name: '每年同期收入走势',
                type: 'line',
                symbol: 'circle',
                color: 'gray',
                data: [48, 50, 51, 49, 40, 35, 65, 45, 59, 30, 72, 58],
                smooth: true,
            }

        ]
    });

    async function render() {
        var data = await ajax('get', "../js/async.json", {})
        var datalis = data
        var str = datalis.map((item) => {
            return  ` <tr>
                            <td>${item.id}</td>
                            <td>${item.count}</td>
                            <td>${item.name}</td>
                            <td>${item.time}</td>
                            <td>${item.state}</td>
                            <td>1</td>
                        </tr>  `
        }).join('')
        document.querySelector('tbody').innerHTML = str
    }
    render()

</script>